<template>
   <div class="html1_1">
      <h1>1.1 HTML网页</h1>
      <p>
        用HTML语言编写的网页文件，也称HTML页面文件，或称HTML文档，是由HTML标记组成的描述性文本。
        HTML不是一种编程语言，而是一种标记语言。
        HTML文件是由各种元素和标签组成，这些标记可以说明文字、图形动画、声音、表格、链接等。
      </p>
      <div class="html1_1_1">
        <h2>1.1.1简介</h2>
        <p>
          1994年末，Tim
          Berners-Lee开发了最初的HTML版本，并创建了万维网联盟（W3C）开发和推广Web技术标准。
          1995年末，发布了第一个HTML标准HTML 2.0，HTML 2.0 是过时的 HTML
          版本，目前在市场上可以找到的浏览器都依赖于更新版本的 HTML。
        </p>
        <p>
          1997 年1月，W3C 标准发布了HTML 3.2， 在HTML 2.0
          标准上添加了被广泛运用的特性，
          诸如字体、表格、applets、围绕图像的文本流，上标和下标。1997 年 12
          月，W3C 发布了HTML 4.0的规范。 HTML 4.0
          最重要的特性是引入了样式表（CSS）。
        </p>
        <p>
          1999 年 12 月，W3C发布了HTML 4.01，仅对 HTML 4.0 的一次较小的更新，
          修正和修复了漏洞。HTML
          4.01存在两个根本性的问题：语法规则不严谨，当遇到错误时，
          每个浏览器都有自己的错误恢复机制。2000 年 1 月，W3C发布了XHTML 1.0
          ，解决了HTML4.01的两个问题。
        </p>
        <p>
          2008 年 1 月W3C发布了HTML 5 ，放弃了XHTML 2.0，采取了HTML的发展道路。
          HTML 5
          中的新特性包括了嵌入音频、视频和图形的功能，客户端数据存储，以及交互式文档。
          HTML 5 还包含了新的元素，比如：&lt; nav&gt;, &lt; header&gt;, &lt;
          footer&gt; 以及 &lt; figure&gt; 等等。HTML 5 工作组包括 ：AOL, Apple,
          Google, IBM, Microsoft, Mozilla, Nokia, Opera,
          以及数百个其他的供应商。
        </p>
      </div>
      <div class="html1_1_2">
        <h2>1.1.2 HTML文件结构</h2>
        <p>
          HTML标记标签通常被称为HTML标签。HTML标签是由尖括号包围的关键词，例如
          &lt;html&gt;。它通常是成对出现的，例如&lt;title&gt;和&lt;/title&gt;。
          标签对中的第一个标签是开始标签，第二个标签是结束标签。开始和结束标签也被称为开放标签和闭合标签。
          在任何一个HTML文件中，最先出现的HTML标签是&lt;html&gt;，它用于表示该文件是以超文本标记语言（HTML）编写的，对应的结束标签&lt;html&gt;位于文件末尾。在HTML标签中，还可以设置一些属性，控制标签所建立的元素。
        </p>
        <p>
          HTML元素是指从开始标签到结束标签的所有代码。大多数的HTML元素可以嵌套（包含其他HTML元素）。没有内容的HTML元素被称为空元素，例如换行符&lt;br
          /&gt;。一个完整的HTML文件包括标题、段落、列表、表格以及各种嵌入对象，这些对象统称为HTML元素。
        </p>
        <p>
          &lt;html&gt;元素定义了整个HTML文件，它拥有一个开始标签&lt;html&gt;，一个结束标签&lt;/html&gt;，以及包含了两个主要的子元素，这两个子元素是由&lt;head&gt;标签和&lt;body&gt;标签建立的。&lt;head&gt;标签所建立的元素内容为文件头部，&lt;body&gt;标签所建立的元素内容为文件主体。
        </p>
        <p>
          Web浏览器的作用是读取HTML文件，并以网页的形式显示出它们。浏览器不会显示
          HTML标签，而是使用标签来解释页面的内容。
        </p>
        <p>一个HTML文件的基本结构如下：</p>
        <p>&lt;html&gt;</p>
        <p>&lt;head&gt;</p>
        <p>
          &lt;title&gt;习近平出席深圳经济特区建立40周年庆祝大会并发表重要讲话全文&lt;/title&gt;
        </p>
        <p>&lt;/head&gt;</p>
        <p>&lt;body&gt;</p>
        <p>
          新华社深圳10月14日电
          深圳经济特区建立40周年庆祝大会14日上午在广东省深圳市隆重举行。中共中央总书记、国家主席、中央军委主席习近平在会上发表重要讲话强调，要高举中国特色社会主义伟大旗帜，统筹推进“五位一体”总体布局，协调推进“四个全面”战略布局，从我国进入新发展阶段大局出发，落实新发展理念，紧扣推动高质量发展、构建新发展格局，以一往无前的奋斗姿态、风雨无阻的精神状态，改革不停顿，开放不止步，在更高起点上推进改革开放，推动经济特区工作开创新局面，为全面建设社会主义现代化国家、实现第二个百年奋斗目标作出新的更大的贡献
        </p>
        <p>&lt;/body&gt;</p>
        <p>&lt;/html&gt;</p>
        <p>
          其中，&lt;head&gt;与&lt;/head&gt;之间作为文件头部，用于说明文件标题及整个文件的一些公共属性；&lt;body&gt;与&lt;body&gt;之间作为文件主体，用于说明文件的主要内容。
        </p>
        <p>【例1.1】在浏览器中显示下面的HTML文档</p>
        <p>
          &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org /TR/ html4/loose.dtd"&gt;
        </p>
        <p v-text="'<html>'"></p>
        <p v-text="'<!-- 这是一个HTML文档基本标记演示-->'"></p>
        <p v-text="'<head>'"></p>
        <p>
          &lt;meta http-equiv="Content-Type" content="text/html;
          charset=gb2312"&gt;
        </p>
        <p v-text="'<title>HTML文档基本标记演示</title>'"></p>
        <p v-text="'</head>'"></p>
        <p
          v-text="
            '<body>10月14日，深圳经济特区建立40周年庆祝大会在广东省深圳市隆重举行。中共中央总书记、国家主席、中央军委主席习近平在会上发表重要讲话。 新华社记者 鞠鹏 摄</body>'
          "
        ></p>
        <p v-text="'</html>'"></p>
        <p v-text="'该文档的显示结果如图1-1所示：'"></p>
        <img src="../assets/images/2.1.png" alt="" />
        <p v-text="'图1-1 HTML文档的基本标记显示效果'"></p>
      </div>
      <div class="html1_1_3">
        <h2>1.1.3 文件编辑器</h2>
        <p>
          编写HTML文件的方法主要有两种：一是手工直接编写，可以使用任一文本编辑器来编写HTML文件，如Windows系统自带的记事本。另一种是使用可视化编辑器，常见的软件有VsCode、Dreamweaver等。
        </p>
        <p>
          <pre>
  <span style="color:red">1. 使用记事本编辑</span>
            我们可以使用记事本来编写一个简单的HTML文件，操作步骤如下：
            (1)选择“开始”|“程序”|“附件”|“记事本”命令，打开记事本程序。 
            (2)在记事本中输入下面的HTML代码。 
          【例1.2】基于记事本的HTML编辑器。
           </pre>
        </p>
        <p v-text="'<html>'"></p>
        <p v-text="'<head>'"></p>
        <p v-text="'<title>使用记事本编辑的HTML文件</title>'"></p>
        <p v-text="'</head>'"></p>
        <p v-text="'<body>习近平指出，深圳是改革开放后党和人民一手缔造的崭新城市，是中国特色社会主义在一张白纸上的精彩演绎。40年来，深圳奋力解放和发展社会生产力，大力推进科技创新，实现了由一座落后的边陲小镇到具有全球影响力的国际化大都市的历史性跨越；坚持解放思想、与时俱进，率先进行市场取向的经济体制改革，实现了由经济体制改革到全面深化改革的历史性跨越；坚持实行“引进来”和“走出去”，积极利用国际国内两个市场、两种资源，积极吸引全球投资，实现了由进出口贸易为主到全方位高水平对外开放的历史性跨越；坚持发展社会主义民主政治，尊重人民主体地位，加强社会主义精神文明建设，积极培育和践行社会主义核心价值观，实现了由经济开发到统筹社会主义物质文明、政治文明、精神文明、社会文明、生态文明发展的历史性跨越；坚持以人民为中心，人民生活水平大幅提高，教育、医疗、住房等实现翻天覆地的变化，率先完成全面建成小康社会的目标，实现了由解决温饱到高质量全面小康的历史性跨越。深圳等经济特区的成功实践充分证明，党中央关于兴办经济特区的战略决策是完全正确的。经济特区不仅要继续办下去，而且要办得更好、办得水平更高。</body>'"></p>
        <p v-text="'</html>'"></p>
        <p>
          <pre>
(3) 输完代码后，选择记事本菜单栏中的“文件”|“保存”命令，在“保存类型”中选择“所有文件”，输入文件名2-1.html，然后保存即可。
       (4) 用IE浏览器打开该网页，运行效果如图2-2所示。
          </pre>
        </p>
       <img src="../assets/images/2.2.png" alt="" />
        <p v-text="'图2-2  在记事本中制作的网页'"></p>
        <p>
          <pre>
  <span style="color:red">2. 使用Dreamweaver编辑</span>
            (1) 启动Dreamweaver CC，新建一个HTML文件。
            (2) 打开“代码”窗口，输入下面的HTML代码。
           【例1.3】基于Dreamweaver的HTML编辑器。
           </pre>
        </p>
        <p v-text="'<!doctype html><!--文档类型声明-->'"></p>
        <p v-text="'<html>'"></p>
        <p v-text="'<head>'"></p>
        <p v-text="'<title>使用Dreamweaver CC编辑的HTML文件</title>'"></p>
        <p v-text="'</head>'"></p>
        <p v-text="'<body>服务电话：12361　值班电话：010-55624303、010-55624311中共中央宣传部宣传舆情研究中心版权所有　未经书面授权禁止使用Copyright© 2018-2020 by www.xuexi.cn. all rights reservedICP备案/许可证编号：京ICP备18000311 京公网安备11040102700063号字体支持：北京北大方正电子有限公司　北京汉仪科印信息技术有限公司　北京华康信息技术有限公司</body>'"></p>
        <p v-text="'</html>'"></p>
        <p>
          <pre>
(3) 输完代码后，选择Dreamweaver CC菜单栏中的“文件”|“保存”命令，在“保存类型”中选择“所有文件”，输入文件名2-3.html，然后保存即可。
       (4) 用IE浏览器打开该网页，运行效果如图2-3所示。
          </pre>
        </p>
       <img src="../assets/images/2.3.png" alt="" />
        <p v-text="'图2-3  在Dreamweaver中制作的网页'"></p>
        <p>
          <pre>
  <span style="color:red">3.  VS Code</span>
            (1) 启动VsCode，新建一个HTML文件。
            (2) 打开“代码”窗口，输入下面的HTML代码。
          【例1.4】基于VsCode的HTML编辑器。
           </pre>
        </p>
        <p v-text="'<html>'"></p>
        <p v-text="'<head>'"></p>
        <p v-text="'<title>使用记事本编辑的HTML文件</title>'"></p>
        <p v-text="'</head>'"></p>
        <p v-text="'<body>今天，在庆祝我们党百年华诞的重大时刻，在“两个一百年”奋斗目标历史交汇的关键节点，在全党集中开展党史学习教育，正当其时，十分必要。我们党的一百年，是矢志践行初心使命的一百年，是筚路蓝缕奠基立业的一百年，是创造辉煌开辟未来的一百年。在百年接续奋斗中，党团结带领人民开辟了伟大道路，建立了伟大功业，铸就了伟大精神，积累了宝贵经验，创造了中华民族发展史、人类社会进步史上令人刮目相看的奇迹。回望过往的奋斗路，眺望前方的奋进路，我们必须把党的历史学习好、总结好，把党的成功经验传承好、发扬好。</body>'"></p>
        <p v-text="'</html>'"></p>
        <p>
          <pre>
(3) 输完代码后，右击选择Open With Live Server(需要先安装Live Server插件)。
       (4) 用IE浏览器打开该网页，运行效果如图2-4所示。
          </pre>
        </p>
       <img src="../assets/images/2.4.png" alt="" />
        <p v-text="'图2-4  在VsCode中制作的网页'"></p>
      </div>
    </div>
</template>

<script>
export default {};
</script>

<style>
</style>